<template>
	<view class="wrap">
		<view class="list" v-if="articleList.length">
			<view
				class="news"
				v-for="item in articleList"
				:key="item"
				@click="$utils.navigateTo(false, `/pages/zhushou/detail?id=${item.id}`)"
			>
				<image :src="item.img" class="news-img" mode="aspectFill"></image>
				<view class="news-right">
					<u--text :text="item.name" bold size="30rpx" lines="2" margin="10rpx 0 22rpx"></u--text>
					<u-icon
						name="map"
						color="#999"
						size="16"
						:label="item.region"
						labelSize="28rpx"
						labelColor="#999"
					></u-icon>
					<view style="margin-top: 20rpx">
						<u-icon
							name="clock"
							color="#999"
							size="14"
							:label="item.start"
							labelSize="26rpx"
							labelColor="#999"
						></u-icon>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" line marginTop="18" />
		</view>
		<u-empty mode="data" marginTop="300rpx" v-else text="暂无内容"> </u-empty>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			imgUrl: app.globalData.ossUrl,
			page: 1,
			articleList: [],
			status: 'loadmore'
		}
	},
	onLoad() {
		this.page = 1
		this.articleList = []
		this.getArticleData()
	},
	onReachBottom() {
		if (this.status !== 'nomore') {
			this.page++
			this.getArticleData()
		}
	},
	methods: {
		getArticleData() {
			uni.showLoading({ title: '数据加载中~' })
			this.status = 'loading'
			/* prettier-ignore */
			this.$https( false, 'post', {
					url: '/race/race/list',
					data: { 
						page: this.page, 
						keyword:'',
						datetime:''
					}
				},
				(res) => {
					this.articleList = this.articleList.concat(res.data)
					this.status = res.data.length>9?'loadmore' :'nomore'
				}
			)
			/* prettier-ignore */
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	min-height: 100vh;
	position: relative;
}
.list {
	padding: 24rpx 26rpx 0;
	.news {
		display: flex;
		width: calc(100% - 40rpx);
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx 20rpx;
		&-img {
			width: 204rpx;
			height: 204rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 460rpx;
			width: 460rpx;
		}
	}
}
</style>
